@import "../../app.less";

@topTextColor : #555555;

.container{
  .flexbox();
  flex-direction: column;

  .top{
    .flexbox();
    flex-direction: column;
    z-index: 1;
    margin-top: 5rem;
    margin-bottom: 1rem;
    // 头像
    .header{
      .flexbox();
      flex-direction: column;
      position: relative;
      .avatar{
        max-width: 4rem;
        max-height: 4rem;
        border-radius: 100rem;
      }
      .banner{
        position: absolute;
        top: 75%;
        image{
          width: 3.75rem;
          height: 1.5rem;
          display: block;
        }
        text{
          font-size: 0.75rem;
          width: 3rem;
          color: #fff;
          z-index: 2;
          .alignCenter();
          top: 40%;
          text-align: center;
        }
      }
    }
    .userInfo{
      margin-top: 10px;
      text{
        color:@topTextColor;
        font-size: 1.25rem;
      }
    }
    .button{
      margin: 0.5rem;
      text{
        color:@topTextColor;
        font-size: 1rem;
        text-align: center;
        display: block;
        margin: 0.25rem;
      }
      .userId{
        .flexbox();
        image{
          height: 1rem;
          width: 1rem;
        }
      }
    }
  }

  .middle{
    .flexbox();
    z-index: 1;
    width: 90%;
    height: 5rem;
    border-radius: 10px;
    background-color: #7b8cfe;
    box-shadow: 2px 4px 4px rgba(0,0,0,0.25);
    margin-bottom: 1rem;
    position: relative;
    text{
      font-size: 1.25rem;
      color: #fff;
      display: block;
      width: 21.875rem;
      height: 5rem;
      text-align: center;
      line-height: 5rem;
    }
    .record{
      image{
        width: 90px;
        height: 70px;
        transform: rotate(-20deg);
        position: absolute;
        bottom: 3rem;
        left: 1.5rem;
      }
    }
    .ranking{
      image{
        width: 90px;
        height: 70px;
        position: absolute;
        bottom: 3rem;
        right: 1.5rem;
        transform: rotate(15deg);
      }
    }
  }

  .bottom{
    z-index: 1;
    .flexbox();
    flex-direction: column;
    justify-content: flex-start;
    height: 44vh;
    width: 100%;
    background: rgba(185, 185, 185, 0.6);
    box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.15);
    border-radius: 40px 40px 0px 0px;
    .line{
      z-index: 2;
      width: 20vw;
      height: 1.5vw;
      margin: 2vh 0 2vh 0;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
    }

    .button{
      .flexbox();
      justify-content: space-between;
      height: 3rem;
      width: 260px;
      padding: 0px 30px 0px 30px;
      margin-bottom: 0.5rem;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      box-shadow: 0px 0px 4px rgba(0,0,0,0.25);
      text{
         font-size: 1rem;
         color: #fff;
      }
      image{
        height: 1.5rem;
        width: 1.5rem;
      }
    }
  }
}

.custom-modal {  
  position: fixed;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  z-index: 2;
}  
  
.modal-mask {  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: rgba(0, 0, 0, 0.5);  
}  
  
.modal-content {  
  background-color: #fff;  
  border-radius: 10px;  
  padding: 20px;  
  width: 80%; /* 或者固定宽度，如 300px */  
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);  
  z-index: 3;
}  
  
.modal-header {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  margin-bottom: 1.5rem;
  width: 100%;  
}  

.modal-header .title{
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
  
.close-btn {  
  position: absolute;
  right: 2.5rem;
  cursor: pointer;  
  font-size: 2rem;  
  color: #999;  
}  
  
.modal-body {  
  /* 可以在这里添加更多样式 */  
}  
  
.role-item {  
  margin-bottom: 10px;  
}  
  
.role-name {  
  font-weight: bold;  
}  
  
.names {  
  /* 可以在这里添加样式来分隔姓名，如添加逗号后空格 */  
}